import { View, Text, Image, Video } from '@tarojs/components';
import React, { Component } from 'react';
import './index.less';
import locChk from '@/assets/image/goods/goods-detail/loc-chk.png';
import close from '@/assets/image/common/close.png';
import back from '@/assets/image/common/back.png';
import api from 'api';

import playIcon from '@/assets/image/community/playIcon.png';


interface customVideoProps {

}

export default class customVideo extends Component<customVideoProps, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      //视频
      rate: 1,
      videoReady: false,
      videoTotal: 0,
      currentTime: 0,
      videoProgress: 0,
      replay: false,
      paused: true,
      // videoWidth: (Utils.size.width - px2dp(90)) * 0.33,
      // videoHeight: (Utils.size.width - px2dp(90)) * 0.33,
    }
  }

  render() {

    return (
      <View className='videoBox_default'>
        <View
          //点击视频暂停/播放 
          onClick={() => {
            console.log(this.state.replay);
            this.setState({
              paused: !this.state.paused,
            })
          }}
        >
          <Video
            ref={(video) => {
              console.log(video)
              this.video = video
            }}
            src={url}
            //url或本地文件,{require('xx.mp4')}
            // poster={videoCorverAddres}
            // source={{uri:'https://video.699pic.com/videos/73/92/43/b_mPEcRsUxTkE91597739243.mp4'}} //url或本地文件,{require('xx.mp4')}
            volume={5} //放大声音倍数
            paused={this.state.paused}  //是否暂停
            rate={this.state.rate}  //播放速度,0暂停,1正常
            muted={false}  //静音
            resizeMode='contain' //视频适应方式
            repeat={false} //是否重复播放
            controls={false}  //显示视频控键
            onLoadStart={this.onLoadStart}
            onLoad={this.onLoad}
            onProgress={this.onProgress}  //视频播放每隔250毫秒触发,并携带当前已播放时间
            onEnd={this.onEnd}
            onError={this.onError}
            showVideoCover={true}
            className='video_default'
          // style={[styles.video,{width:videoWidth,height:videoHeight}]}
          />
        </View >
        {/* 进度条 */}
        {/* <View style={styles.progressBox}>
        <View style={[styles.progress,{width:Dimensions.get('window').width*this.state.videoProgress}]}></View>
    </View> */}
        {/* 若不设置重复播放,视频结束显示重新播放按钮 */}
        {
          this.state.paused ?
            <View className='wrap' 
            onClick={()=>{
              this._replay
            }}>
              <Image
              className='play'
              src={playIcon}
              />
            </View>
            : <View></View>
        }

        {/* 加载圆圈 */}
        {
          this.state.videoReady ?
            <View></View> :
            <View className='load'  >
              <View
               
              />
            </View>
        }
      </View>
    );
  }


}
